<template>
	<view class="container">
		<view class="daren-photo-swiper">
			<view class="daren-photo-swiper__item" v-for="(item, index1) in photoList" :key="index1">
				<view v-if="item.mediaUrl" :style="{ backgroundImage: 'url( ' + item.mediaUrl + ' )' }" @click="showImg(index1)" class="daren-img">
					<view class="daren-bottom" v-if="item.isLike" @click.stop="cancel_like(item)">
						<view class="daren-bottom-icon"><image src="../../../static/images/praise-heart.png"></image></view>
						<view>{{ item.likeCount }}</view>
					</view>
					<view class="daren-bottom" v-else @click.stop="to_like(item)">
						<view class="daren-bottom-icon"><image src="../../../static/images/praise-heart-black.png"></image></view>
						<view>{{ item.likeCount }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin, successToShow, errorToShow, debounce } from '@/config/common.js';
import { getWebServePlayerPhotoList, updateServePlayerLikeCount, cancelServePlayerLikeCount } from '@/constant/customer.js';
export default {
	components: {},
	data() {
		return {
			photoList: [],
			photos: [],
			query_filter: {
				serverPlayerId: '',
				customerId: uni.getStorageSync('customerId'),
				pageIndex: 0,
				pageSize: 10
			},
			servePlayerId: '',
			customerId: uni.getStorageSync('customerId')
		};
	},
	onLoad: function(option) {
		if (isLogin()) {
			if (option.servePlayerId) {
				this.servePlayerId = option.servePlayerId;
				this.query_filter.serverPlayerId = option.servePlayerId;
				if (this.servePlayerId) {
					this.getPhotoList(this.query_filter);
				}
			}
		} else {
			toLogin();
		}
	},
	// onReachBottom() {
	// 	this.query_filter.pageIndex++;
	// 	this.getPhotoList(this.query_filter);
	// },
	// onPullDownRefresh() {
	// 	this.query_filter.pageIndex = 0;
	// 	this.getPhotoList(this.query_filter);
	// },
	methods: {
		async getPhotoList() {
			//评论列表
			let res = await getWebServePlayerPhotoList(this.query_filter);
				this.photoList = res.data.servePlayerMediaList||[];
			// if (res.TotalNumber > this.query_filter.pageIndex * this.query_filter.pageSize) {
				// uni.stopPullDownRefresh();
			
				// if (this.query_filter.pageIndex > 0) {
				// 	for (let i = 0; i < res.Source.length; i++) {
				// 		let obj = res.data[i];
				// 		this.photoList.push(obj);
				// 	}
				// } else {
					
				// }
				// this.photos = [];
				// for (let i = 0; i < this.photoList.length; i++) {
				// 	this.photos.push(this.photoList[i].MediaUrl);
				// }
			// } else {
				// return;
			// }
		},
		to_like(select_item) {
			//点赞
			debounce(() => {
				this.imp_tolike(select_item);
			}, 500)();
		},
		async imp_tolike(select_item) {
			//点赞
			if (this.servePlayerId && this.customerId) {
				await cancelServePlayerLikeCount({ serverPlayerId: this.servePlayerId, mediaId: select_item.Id, customerId: this.customerId });
				successToShow('已点赞', res => {
					select_item.IsLike = true;
					select_item.LikeCount++;
				});
			}
		},
		cancel_like(select_item) {
			//取消点赞
			debounce(() => {
				this.imp_cancellike(select_item);
			}, 500)();
		},
		async imp_cancellike(select_item) {
			//取消点赞
			if (this.servePlayerId && this.customerId) {
				await cancelServePlayerLikeCount({ serverPlayerId: this.servePlayerId, mediaId: select_item.Id, customerId: this.customerId });
				successToShow('已取消', res => {
					select_item.IsLike = false;
					if (select_item.LikeCount > 1) {
						select_item.LikeCount--;
					} else {
						select_item.LikeCount = 0;
					}
				});
			}
		},
		showImg(index) {
			uni.previewImage({
				current: index,
				urls: this.photos
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-wrap: wrap;
}

.photo-item {
	width: 30%;
	margin-left: 2.5%;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	overflow: hidden;
}

.daren-photo-swiper {
	width: 100%;
	padding: 20rpx 30rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	&__item {
		width: 32%;
		margin-bottom: 20rpx;
		.daren-img {
			width: 100%;
			height: 280rpx;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			position: relative;
			border-radius: 16rpx;
		}

		.daren-bottom {
			font-size: $main-text-size-28;
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			color: #ffffff;
			display: flex;
			align-items: baseline;
			font-family: 'SourceHanSansCN-Regular';
			width: 121rpx;
			height: 60rpx;
			justify-content: flex-end;
			align-items: flex-end;

			&-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

.daren-photo-swiper::after {
	content: '';
	width: 32%;
}
</style>
